<template>
    <div class="listView">
        <listview-top :playlists="playlists"></listview-top>
        <play-list :playlists="playlists"></play-list>
    </div>
</template>

<script>
import  listviewTop from "@/components/listviewTop.vue";
import  playList from "@/components/playList.vue";
import { reactive, toRefs,onMounted } from 'vue'
import { getplaylistDetail } from "@/api/index";
import {useRoute} from 'vue-router'
import { useStore } from "vuex";
export default {
    components:{
        listviewTop,
        playList
    },
    setup () {
        const route = useRoute()
        const store = useStore()
        const state = reactive({
            list: [],
            playlists:{
                creator:{},
                tracks:[]
            }
        })
        onMounted(async ()=>{
            let result = await getplaylistDetail(route.query.id);
            state.playlists = result.data.playlist
            store.commit("setPlaylist", state.playlists.tracks);
        })
        return {
            ...toRefs(state),
        }
    }
}
</script>

<style lang="les" scoped>

</style>